<template>
  <div>
    <div class="block">
      <span class="demonstration">默认</span>
      <at-date-picker
        v-model="value3"
        type="datetimerange"
        placeholder="选择时间范围"
        :bgblue='true'
        >
      </at-date-picker>
    </div>
    <div class="block1">
      <span class="demonstration">带快捷选项</span>
      <at-date-picker
        v-model="value4"
        type="datetimerange"
        :picker-options="pickerOptions2"
        placeholder="选择时间范围"
        align="right">
      </at-date-picker>
    </div>
    <div class="block3">
     <at-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions0">
    </at-date-picker>
  </div>
  </div>
 
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value4: ''
      };
    }
  };
</script>
<style>
  .block{
    float: left;
  }
   .block1{
    float: left;
    margin-left: 50px;
  }
  .block3{
    float: left;
    margin-left: 50px;
  }
</style>